<template>
    <header>
        <el-menu 
            background-color="#324157"
            text-color="#fff"
            active-text-color="#20a0ff"
            class="el-menu-demo" mode="horizontal" >
            <span class="title">龙席CRM管理系统</span>
            <el-menu 
            background-color="#324157"
            text-color="#fff"
            active-text-color="#20a0ff"
            :default-active="activeIndex" 
            class="type el-menu-demo" 
            mode="horizontal" 
            @select="handleSelect">
              <el-menu-item index="3">其他</el-menu-item>
              <el-menu-item index="4">B2C运营</el-menu-item>
              <el-menu-item index="2">维权运营</el-menu-item>
              <el-menu-item index="1">销售</el-menu-item>
            </el-menu>
            <span class="option event"  @click="logout" style="outline:none;">退出</span>
            <el-dropdown trigger="click" class="option" @command="handleCommand" style="outline:none;">
	            <span class="el-dropdown-link" style="display:inline-block; line-height:50px;">
	              Hi: {{userData.name || this.name}} <i class="el-icon-arrow-down"></i>
	            </span>
	            <el-dropdown-menu slot="dropdown">
	              <el-dropdown-item :key="index" v-for="(item,index) in options" :command="item.value">
	              	{{item.label}}
                    </nuxt-link>
	              </el-dropdown-item>
	            </el-dropdown-menu>
	        </el-dropdown>
        </el-menu>
    </header>
</template>

<script>
	import Vue from 'vue'
    import { getCookie } from '~/utils/auth'
    import { Message,Dropdown,MenuItem,Menu,DropdownMenu,DropdownItem} from 'element-ui'
    import { mapGetters } from 'vuex';
    
    Vue.use(Dropdown)
    Vue.use(DropdownMenu)
    Vue.use(DropdownItem)
    

    export default {
        data() {
            return {
                name: '',
                manage: [
                    {title:'基本资料'},
                    {title:'修改密码'}
                ],
                showManage: false,
                options: [{
                  value: '1',
                  label: '基本资料'
                }, {
                  value: '2',
                  label: '修改密码'
                }],
                activeIndex: '1',//
            }
        },
        methods: {
            logout :function () {
                this.$store.dispatch('getLoginOut');
                if (!process.BROWSER_BUILD) {
                  return false;
                }
                sessionStorage.clear()
            },
            ifShowManege() {
                this.showManage = !this.showManage
            },
            handleCommand(command) {
			        if (command==1) {
	                    this.$router.push({path: '/manage/customerInformation'});
			        }
			        if (command==2) {
	                    this.$router.push({path: '/manage/ModifyPas'});
			        }		        
		    		},
		    		handleSelect(val) {
                this.$store.commit('PAGETABSLIST',[])
    	    			this.activeIndex = val
    						if (!process.BROWSER_BUILD) {
        			        return false;
    			      }
    			      sessionStorage.type = this.activeIndex
    			      this.$parent.getTypeChild()
		    		},
        },
        computed : {
            ...mapGetters({
                'userData' : 'getUserData'
            })
        },
        mounted() {
            let userData = getCookie('userData');
            if(userData) {
                this.name = this.userData.name || JSON.parse(userData).name;
            }
        },
        beforeMount(){
  			if (!process.BROWSER_BUILD) {
              return false;
            }
            if (sessionStorage.type) {
            	this.activeIndex = sessionStorage.type
            }else {
            	sessionStorage.type = 1
            }            
        }
    }
</script>

<style lang="scss">
    header {
        width: 100%;
        height: 50px;
        position: fixed;
        left: 0;
        z-index: 160;
        top:0;
        .el-dropdown-menu{
	    	top: 58px;
	    	left: 1730px;
	    }
        .el-menu--horizontal{
            border: none;
        }
	    .type {
	    	position: absolute;
  	    left: 250px;
  	    bottom: 0;
	    }
	    .el-menu {
	        border-radius: 0;
	        height: 100%;
	    .title {
	        font-size: 24px;
	        color: #fff;
	        line-height: 50px;
	        margin-left: 20px;
	    }
	    .option {
	        float: right;
	        text-align: center;
	        font-size: 14px;
	        color: #bfcbd9;
	        line-height: 50px;
	        padding: 0 20px;
	        cursor: pointer;
	        position: relative;
	        img {
	            height:12px;
	        }
	        ul {
	            position: absolute;
	            background-color: #fff;
	            border: 1px solid #000;
	            list-style-type: none;
	            line-height: 1em;
	            text-align: center;
	            padding: 0 10px;
	            top: 55px;
	            li {
	                margin: 10px 0;
	                a {
	                    color: #000;
	                }
	            }
	        }
	    }
	    .event {
	        cursor: pointer;
	    }
	    }
	    .el-menu--horizontal .el-menu-item {
	        float: right;
	        height: 50px;
	        line-height: 50px;
	    }
    }
    

</style>